<template>
<div>
    <el-drawer :model-value="isEditShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
        <template #header>
            <h4 style="font-weight: bold;">编辑企业</h4>
        </template>
        <table class="tableItem" border="1">
            <tr>
                <td width="120" class="titleTd redColor"><span>牛场名称*</span></td>
                <td><el-input v-model="companyInfo.name" style="height: 40px;" placeholder="请输入牛场名称" /></td>

                <td width="100" class="titleTd redColor"><span>养殖代码*</span></td>
                <td><el-input v-model="companyInfo.farmCode" style="height: 40px;" placeholder="请输入养殖代码" /></td>

                <td width="120" class="titleTd redColor"><span>建厂时间*</span></td>
                <td>
                    <el-date-picker style="width: 140px;" value-format="YYYY-MM-DD" v-model="companyInfo.buildDate" type="date" placeholder="请选择时间" />
                </td>
            </tr>
            <tr>
                <td class="titleTd redColor"><span>厂址*</span></td>
                <td colspan="3"><el-input v-model="companyInfo.address" style="height: 40px;" placeholder="请输入厂址" /></td>

                <td class="titleTd"><span>所属法人单位</span></td>
                <td><el-input v-model="companyInfo.orgName" style="height: 40px;" placeholder="请输入单位名称" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>经济性质</span></td>
                <td><el-input v-model="companyInfo.orgType" style="height: 40px;" placeholder="请输入经济性质" /></td>

                <td class="titleTd redColor"><span>负责人*</span></td>
                <td><el-input v-model="companyInfo.contactUsername" style="height: 40px;" placeholder="请输入负责人名称" /></td>

                <td class="titleTd redColor"><span>联系电话*</span></td>
                <td><el-input type="number" v-model="companyInfo.contactPhone" style="height: 40px;" placeholder="请输入联系电话" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>总投资(万元)</span></td>
                <td colspan="3"><el-input type="number" v-model="companyInfo.totalInvestment" style="height: 40px;" placeholder="请输入总投资" /></td>

                <td class="titleTd"><span>占地面积(亩)</span></td>
                <td><el-input type="number" v-model="companyInfo.landArea" style="height: 40px;" placeholder="请输入占地面积" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>类型</span></td>
                <td colspan="3">
                    <el-radio-group v-model="companyInfo.type" style="margin-left: 10px;">
                        <el-radio :value="2" size="large">奶牛场</el-radio>
                        <el-radio :value="3" size="large">肉牛场</el-radio>
                    </el-radio-group>
                </td>

                <td class="titleTd"><span>年总产值(万元)</span></td>
                <td><el-input type="number" v-model="companyInfo.annualOutput" style="height: 40px;" placeholder="请输入年总产值" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>职工人数</span></td>
                <td colspan="5"><el-input type="number" v-model="companyInfo.employeeCount" style="height: 40px;" placeholder="请输入职工人数" /></td>
            </tr>
            <tr>
                <td class="titleTd"><span>申报品种</span></td>
                <td colspan="2">
                    <!-- <el-select clearable v-model="companyInfo.declaredVariety" placeholder="请选择申报品种">
                        <el-option v-for="(item, index) in breedList" :key="index" :label="item.name" :value="item.value" />
                    </el-select> -->
                    <el-input v-model="companyInfo.declaredVariety" style="height: 40px;" placeholder="请输入申报品种" />
                </td>
                <td class="titleTd"><span>存栏头数</span></td>
                <td colspan="2"><el-input type="number" v-model="companyInfo.stockCount" style="height: 40px;" placeholder="请输入存栏头数" /></td>
            </tr>
            <tr>
                <td class="titleTd" style="vertical-align: middle;"><span>培育种公牛</span></td>
                <td colspan="2"><el-input type="number" v-model="companyInfo.breedingBulls" style="height: 40px;" placeholder="请输入培育种公牛数" /></td>

                <td class="titleTd" style="vertical-align: middle;"><span style="line-height: 18px; font-size: 14px;">联合育种种公牛站</span></td>
                <td colspan="2"><el-input v-model="companyInfo.breedingStation" style="height: 40px;" placeholder="请输入联合育种种公牛站" /></td>
            </tr>
            <!-- <tr>
                <td class="titleTd" colspan="2"><span>主要机构设置</span></td>
                <td class="titleTd"><span>生产</span></td>
                <td class="titleTd"><span>育种</span></td>
                <td class="titleTd"><span>兽医</span></td>
                <td width="120" class="titleTd"><span>销售</span></td>
            </tr> -->
            <!-- <tr>
                <td rowspan="2" class="titleTd" style="vertical-align: middle;">
                    <span>人员组成</span>
                </td>
                <td class="titleTd"><span>部门总人数</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
            </tr> -->
            <!-- <tr>
                <td class="titleTd"><span>技术人员数</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人数" /></td>
            </tr> -->
            <!-- <tr>
                <td class="titleTd redColor"><span>执业兽医姓名*</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人员姓名" /></td>
                <td class="titleTd"><span>身份证号</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入身份证号" /></td>
                <td class="titleTd" style="vertical-align: middle;"><span style="line-height: 18px;">获得执业兽医资质时间</span></td>
                <td><el-date-picker style="width: 120px;" v-model="venueName" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"/></td>
            </tr> -->
            <!-- <tr>
                <td rowspan="2" class="titleTd redColor" style="vertical-align: middle;"><span>生产性能测定员*</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人员姓名" /></td>
                <td class="titleTd"><span>身份证号</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入身份证号" /></td>
                <td class="titleTd"><span>培训时间</span></td>
                <td><el-date-picker style="width: 120px;" v-model="venueName" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"/></td>
            </tr>
            <tr>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入人员姓名" /></td>
                <td class="titleTd"><span>身份证号</span></td>
                <td><el-input v-model="venueName" style="height: 40px;" placeholder="请输入身份证号" /></td>
                <td class="titleTd"><span>培训时间</span></td>
                <td><el-date-picker style="width: 120px;" v-model="venueName" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"/></td>
            </tr> -->
        </table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelHandler">关闭</el-button>
                <el-button type="primary" @click="editCompanyHandler">确认</el-button>
            </span>
        </template>
    </el-drawer>
</div>
</template>

<script setup>
import { ref, onMounted, onUpdated } from 'vue'
import { reqGetBreedList } from '@/api/cattleStructure'
import { reqAddCompanyList, reqGetCompanyInfo } from '@/api/company'
import { ElMessage } from 'element-plus'

// 接收父组件传递过来的数据
let props = defineProps(['isEditShow', 'companyId'])

// 注册自定义事件
let $emit = defineEmits(['closeEditDialog'])

// 通过id获取详情
const getCompanyInfo = async() => {
    let res = await reqGetCompanyInfo({
        id: props.companyId
    })
    if(res.status == 200){
        Object.assign(companyInfo.value, res.data)
    }
}

// 收集表单信息
let companyInfo = ref({
    type: '', // 企业类型：1-平台、2-奶牛、3-肉牛
    name: '', // 牛场名称
    farmCode: '', // 养殖代码
    buildDate: '', // 建厂时间
    address: '', // 厂址
    orgName: '', // 所属法人单位
    orgType: '', // 经济性质
    contactUsername: '', // 负责人姓名
    contactPhone: '', // 联系电话
    totalInvestment: '', // 总投资
    landArea: '', // 占地面积(亩)
    annualOutput: '', // 年总产值（万元）
    employeeCount: '', // 职工人数
    declaredVariety: '', // 申报品种
    stockCount: '', // 存栏头数
    breedingBulls: '', // 培育种公牛
    breedingStation: '', // 联合育种种公牛站
})

// 获取牛品种，筛选下拉列表
let breedList = ref([])
const getBreedList = async () => {
    let res = await reqGetBreedList()
    breedList.value = res.data
}

// 确认按钮
const editCompanyHandler = async () => {
    let res = await reqAddCompanyList(companyInfo.value)
    if(res.status == 200){
        $emit('closeEditDialog', false)
        ElMessage({
            message: res.msg,
            type: 'success',
        })
    }
}

// 关闭按钮
const cancelHandler = () => {
    $emit('closeEditDialog', false)
}

// 组件挂载完毕
onMounted(() => {
    getBreedList()
})

// 组件更新
onUpdated(() => {
    getCompanyInfo()
})
</script>
<script>
export default {
    name: 'editCompany'
}
</script>

<style scoped lang="scss">
:deep(.el-drawer__header) {
    margin-bottom: 0;
    color: #000;
}
.tableItem{
    width: 100%;
    border-collapse: collapse;
    td{
        border: 1px solid #666666;
        // 表格中的输入框，样式修改
        ::v-deep(.el-input__wrapper) {
            --el-input-border-color: #ffffff;
            --el-input-border-radius: 0px;
            --el-input-focus-border-color: #ffffff;
            --el-input-hover-border-color: #ffffff; 
        }
    }
    .titleTd{
        span{
            line-height: 40px;
            text-align: center;
            display: block;
        }
    }
    tr{
        .redColor{
            color: red;
        }
    }
}
</style>